@layer base, utils, components;

@import '@webtui/css/base.css';
@import '@webtui/css/utils/box.css';
@import '@webtui/css/components/button.css';
@import '@webtui/css/components/typography.css';
@import '@webtui/css/components/badge.css';
@import '@webtui/css/components/input.css';
@import '@webtui/css/components/textarea.css';
@import '@webtui/css/components/popover.css';
@import '@webtui/css/components/separator.css';
@import '@webtui/css/components/pre.css';
@import '@webtui/css/components/dialog.css';

@import '@/styles/flexbox.css';
@import '@/styles/padding.css';
@import '@webtui/theme-catppuccin';
@import '@webtui/theme-nord';
@import '@webtui/theme-gruvbox';
@import '@webtui/theme-vitesse';
@import '@webtui/plugin-nf';
@import '@webtui/theme-everforest';

@layer base {
    :root {
        --font-family:
            'JetBrains Mono', Menlo, Monaco, monospace, 'Symbols Nerd Font';
        --font-size: 18px;
        --line-height: 1.4;
        --box-border-color: var(--background1);
    }

    body,
    html {
        width: 100vw;
        height: 100vh;
        overflow-y: scroll;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }

    ::highlight(vim) {
        background-color: var(--foreground0);
        color: var(--background0);
    }
}

@layer components {
    hr {
        display: block;
        padding: 0.5lh 0;
        width: 100%;
        border: none;
        background-image: linear-gradient(
            0deg,
            transparent 0,
            transparent calc(0.5lh - 1px),
            var(--foreground2) calc(0.5lh - 1px),
            var(--foreground2) calc(0.5lh + 1px),
            transparent calc(0.5lh + 1px),
            transparent
        );
    }
}

@media (max-width: 480px) {
    :root {
        --font-size: 16px;
    }
}
